import { getSceneByName } from '../../components/three/ThreeScene.vue'
import * as THREE from 'three'
import * as Cesium from 'cesium'
import { on, THREE_SCENE_INITIALIZATION } from '../../utils/EventBus.js'
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'
import { loadGltf } from './LoadGltf.js'

import { ModelUtils } from '../../components/cesium-three/ModelUtils.js'
// import { getDirectionalLight } from '../../components/three/light/DirectionalLight.js'
import { getSunLightDirectionn } from '../../components/cesium-three/sun.js'

import { waitUntilValueExist } from '../../utils/unsorted.js'
import { SyncCesiumWithThree } from '../../components/cesium-three/SyncCesiumWithThree.js'
export const group = new THREE.Group()

export const sceneName = 'threeScene'

on(THREE_SCENE_INITIALIZATION, ({ detail: { sceneName: t3Name } }) => {
    if (sceneName !== t3Name) return

    const scene = getSceneByName(sceneName)
    // const sunLight = getDirectionalLight()

    const { renderer, camera, preRender, postRender } = scene.my

    waitUntilValueExist(() => window.cesiumViewer).then((viewer) => {
        const { x, y, z } = getSunLightDirectionn()
        console.log('🚀 ~ waitUntilValueExist ~  x, y, z :', x, y, z)
        SyncCesiumWithThree.instance = new SyncCesiumWithThree({
            cesiumCamera: viewer.camera,
            threeCamera: camera,
        })
    })

    // {
    //     "name": "库室1",
    //     "oil": "0.1%",
    //     "oxygen": "20.9%",
    //     "temperature": "25°C",
    //     "humidity": "50%",
    //     "door": "关闭",
    //     "coord": {
    //         "longitude": 2.024726076130041,
    //         "latitude": 0.6975419291686485,
    //         "height": 323.3668963019752
    //     },
    //     "cartographicArray": [
    //         2.024726076130041,
    //         0.6975419291686485,
    //         323.3668963019752
    //     ],
    //     "cartesian3": {
    //         "x": -2146621.552876917,
    //         "y": 4399616.737382552,
    //         "z": 4075318.366776635
    //     }
    // }

    let { longitude, latitude, height } = {
        longitude: 2.024726076130041,
        latitude: 0.6975419291686485,
        height: 323.3668963019752,
        // height: 0,
    }
    longitude = Cesium.Math.toDegrees(longitude)
    latitude = Cesium.Math.toDegrees(latitude)

    ModelUtils.fixXYtoCesium(group)

    const threeMatrix4 = ModelUtils.getThreeMatrix4FromDegrees(
        longitude,
        latitude,
        height
    )
    group.applyMatrix4(threeMatrix4)

    loadGltf('LittlestTokyo.glb', scene)
    setTimeout(() => {
        console.log('🚀 ~ setTimeout ~ group:', group.quaternion.toArray())
    })

    const axesHelper = new THREE.AxesHelper(500)

    group.add(axesHelper)

    scene.add(group)

    loadRGBE()
    function loadRGBE() {
        new RGBELoader()
            .setPath('/equirectangular/')
            .load('royal_esplanade_1k.hdr', function (texture) {
                texture.mapping = THREE.EquirectangularReflectionMapping

                // scene.background = texture
                scene.environment = texture
            })
    }
    // LittlestTokyo

    /*
  function beginRotate(radius) {
    return (angle) => {
      angle /= 5000
      // const radius = 10 // 调整旋转半径
      camera.position.x = radius * Math.sin(angle)
      camera.position.z = radius * Math.cos(angle)
      camera.lookAt(0, 0, 0) // 确保相机始终看向目标点

      // renderer.render(scene, camera)
    }
  }
  function moveToOrigin(object) {
    // Create a bounding box for the object
    const boundingBox = new THREE.Box3().setFromObject(object)

    // Calculate the center of the bounding box
    const center = boundingBox.getCenter(new THREE.Vector3())

    // Create a group to hold the model
    const group = new THREE.Group()
    group.aabb = boundingBox

    // Add the model to the group
    group.add(object)

    // Move the group so the model's center is at the origin
    group.position.sub(center)

    return group
  }
    */
})
